<template>
    <div class="wrap">
        <!--引入子组件-->
        <data-display v-if="refresh" >
            <div style="margin-right:40px">
                <span v-if="userInfo" style="color: #7ef0ffb3; font-size: 18px;margin-right: 6%;letter-spacing:6px;font-weight: bold;" >
                    {{userInfo.realname}}
                </span>
                <i class="iconfont icon-tubiaozhizuomobanyihuifu-" @click="exitBrand"></i>
            </div>
        </data-display>
    </div>
</template>

<script>
    import dataDisplay from './dataDisplay';

    // 每小时页面刷新一次，重新请求服务器
    const refreshTime = (1000*60*60);
    export default {
        components: {
            dataDisplay
        },
        data() {
            return {
                userInfo : this.$store.getters.userInfo,
                intervalId:null,
                refresh : true
            }
        },
        mounted() {
            this.bigBrand();
            setTimeout(() => {
                this.dataRefreh();
            },refreshTime);
        },
        destroyed(){
            // 在页面销毁后，清除计时器
            this.clear();
        },
        methods: {
            // 设置页面大屏
            bigBrand() {
                let docElm = document.documentElement;
                if (docElm.requestFullscreen) {
                    docElm.requestFullscreen()
                }
                //FireFox
                else if (docElm.mozRequestFullScreen) {
                    docElm.mozRequestFullScreen()
                }
                //Chrome等
                else if (docElm.webkitRequestFullScreen) {
                    docElm.webkitRequestFullScreen()
                }
                //IE11
                else if (elem.msRequestFullscreen) {
                    docElm.msRequestFullscreen()
                }
            },
            // 关闭全屏大屏
            exitBrand() {
                //W3C
                if (document.exitFullscreen) {
                    document.exitFullscreen()
                }
                //FireFox
                else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen()
                }
                //Chrome等
                else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen()
                }
                //IE11
                else if (document.msExitFullscreen) {
                    document.msExitFullscreen()
                }
                //返回到上一步
                this.$router.back()
            },
            // 定时刷新数据函数
            dataRefreh() {
                // 计时器正在进行中，退出函数
                if (this.intervalId != null) {
                    return;
                }
                // 计时器为空，操作
                let _this = this;
                this.intervalId = setInterval(() => {
                    console.log("刷新" + new Date());
                    _this.refresh = false;
                    _this.$nextTick(() => {
                        _this.refresh = true;
                    });
                }, refreshTime);
            },
            // 停止定时器
            clear() {
                clearInterval(this.intervalId); //清除计时器
                this.intervalId = null; //设置为null
            },
        }
    }
</script>

<style>
    body::-webkit-scrollbar {
        display: none;
    }

    .wrap {
        background-size: cover;
        line-height: 1.15;
    }

    .iconfont {
        font-family: 'iconfont' !important;
        font-size: 24px;
        font-style: normal;
        color: #0b8892;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
        cursor: pointer;
    }
</style>
